<template>
  <!-- 引入并使用自定义导航栏组件 -->
  <custom-navbar title="绑卡" show="true"></custom-navbar>
  <!-- 页面内容区域，确保内容不被导航栏遮挡 -->
  <view class="contentBox">
	  <text style="font-size: 30rpx;font-weight: bold;">卡号</text>
	   <view class="input-view">
	   	 <input type="text" placeholder="请输入卡号" style="height: 100rpx;padding-left: 20rpx;" v-model="cardNumber"/>
	   </view>
	   <view style="height: 30rpx;"></view>
	   <text style="font-size: 30rpx;font-weight: bold;">密码</text>
	    <view class="input-view">
	    	 <input type="password" placeholder="请输入密码" style="height: 100rpx;padding-left: 20rpx;" password="true" v-model="password"/>
	    </view>
  </view>
  <view class="bottom-view" @click="submitData">
  	绑定
  </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue';

export default {
  components: {
    CustomNavbar
  },
  data () {
	  return {
		  cardNumber: '',
		  password: '',
	  }
  },
  methods: {
	  submitData() {
		  console.log(this.password+'////'+this.cardNumber);
	  }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
  /* 确保内容不被导航栏遮挡 */
  flex-grow: 1;
  height: 1px;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.bottom-view {
	height: 100rpx;
	background-color: red;
	padding-bottom: 20rpx;
	text-align: center;
	color: white;
	font-size: 36rpx;
	line-height: 100rpx;
	font-weight: bold;
}

.input-view {
	height: 100rpx;
	width: 100%;
	border: 1rpx solid gray;
	margin-top: 10rpx;
	border-radius: 10rpx;
}
</style>